<script type = "text/javascript" >
    $(function() {
        chartT = $('#sentiment-trend').highcharts({
            chart: {
                type: 'areaspline'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 0,
                y: 0,
                floating: true,
                borderWidth: 1,
                backgroundColor: 'transparent',
                enabled: false
            },
            xAxis: {
                gridLineWidth: 0,
                tickWidth: 0,
                lineWidth: 0,
                categories: ["Sep 10", "Sep 11", "Sep 12", "Sep 13", "Sep 14", "Sep 15", "Sep 16"]
            },
            yAxis: {
                title: {
                    text: ''
                },
                showFirstLabel: false,
                gridLineWidth: 0,
                labels: {
                    formatter: function() {
                        return this.value / 1000 + 'k';
                    }
                },
                endOnTick: false,
                maxPadding: 0.1
            },
            tooltip: {
                shared: true,
                valueSuffix: ' mentions'
            },
            plotOptions: {
                area: {
                    fillOpacity: 1
                },
                series: {
                    marker: {
                        fillColor: 'transparent',
                        lineWidth: 0,
                        lineColor: 'transparent', // inherit from series
                        states: {
                            hover: {
                                lineWidth: 1,
                                radius: 4,
                                lineColor: '#EEE',
                                fillColor: '#FFF'
                            }
                        }
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                    name: 'Negative',
                    data: [0, 0, 400, 1408, 2547, 1929, 1928],
                    color: "#EA4037",
                    fillOpacity: 1
                }, {
                    name: 'Neutral',
                    data: [0, 0, 300, 1033, 2201, 1767, 1766],
                    color: "#000000",
                    fillOpacity: 1
                },
                {
                    name: 'Possitive',
                    data: [0, 0, 200, 947, 1402, 334, 1268],
                    color: "#66C36B",
                    fillOpacity: 1
                }]
        }, function(chart) {
            chart.yAxis[0].update({
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                }
            });
        });
    });


</script>

<div class="row-fluid white-row">
    <div class="metrics-block-number">
        <h5>OVERALL SENTIMENT
            <a class="popover-question-container" rel="tooltip" data-title="The gauge provides a visual reference of overall sentiment based on the current filters.  The bar below shows the specific percentages for positive, neutral and negative sentiment. Keep in mind, mentions with unknown sentiment are excluded from this metric." data-original-title="">
                <i class="icon-question"></i>
            </a>
        </h5>
        <div class="mozaic-widget sentiment-analytics widget-overall_sentiment" data-widget="overall_sentiment" data-params="{&quot;channels&quot;:{&quot;/filters&quot;:&quot;/filters-4&quot;,&quot;/data&quot;:&quot;/search_analytics_heavy-1841&quot;,&quot;/streams&quot;:&quot;/streams-1848&quot;,&quot;/tags&quot;:&quot;/tags-1849&quot;}}" data-guid="widget-1865" data-initialized="true">
            <div class="mozaic-widget widget-sentiment_meter_reports_state_manager" data-widget="sentiment_meter_reports_state_manager" data-params="{&quot;channels&quot;:{&quot;/data&quot;:&quot;/search_analytics_heavy-1841&quot;,&quot;/streams&quot;:&quot;/streams-1848&quot;,&quot;/tags&quot;:&quot;/tags-1849&quot;},&quot;path_positive&quot;:&quot;sentiment/total/positive&quot;,&quot;path_negative&quot;:&quot;sentiment/total/negative&quot;,&quot;path_neutral&quot;:&quot;sentiment/total/neutral&quot;}" data-guid="widget-2169" data-initialized="true">
                <div class="mozaic-widget widget-sentiment_meter" data-widget="sentiment_meter" data-params="{&quot;channels&quot;:{&quot;/data&quot;:&quot;/search_analytics_heavy-1841&quot;},&quot;path_negative&quot;:&quot;sentiment/total/negative&quot;,&quot;path_positive&quot;:&quot;sentiment/total/positive&quot;,&quot;path_neutral&quot;:&quot;sentiment/total/neutral&quot;}" data-guid="widget-2230" data-initialized="true">
                    <div class="sentiment-graph setiment-report-meter">
                        <div class="sentiment-meter-gauge">
                            <table class="sentiment-data">
                                <tr> 
                                    <th>Negative</th> 
                                    <td>12%</td> 
                                </tr> 
                                <tr> 
                                    <th>Neutral</th> 
                                    <td>60%</td> 
                                </tr> 
                                <tr> 
                                    <th>Positive</th> 
                                    <td>28%</td> 
                                </tr> 
                            </table>
                            <div id="sentiment-metter"></div>
                            <script>
                                $(function() {
                                    var values = [],
                                            labels = [];
                                    $(".sentiment-data tr").each(function() {
                                        values.push(parseInt($("td", this).text(), 10));
                                        labels.push($("th", this).text());
                                    });
                                    $("table").hide();
                                    Raphael("sentiment-metter", 205, 100).sentiment(100, 100, 80, values, labels, "transparent");
                                });
                            </script>
                        </div>
                        <div class="sentiment-meter-numbers">
                            <span class="sentiment-meter-gauge-sentiment positive-colored">moderately</span>
                            <span class="sentiment-meter-gauge-dominant-percentage positive-colored">positive</span>
                        </div>
                    </div>
                    <ul class="sentiment-graph-details">
                        <li class="sentiment-graph-details-positive" style="width:28%">
                            <div class="sentiment-graph-details-left">
                                <span class="sentiment-graph-details-percentage positive-colored">28%</span>
                                <span class="sentiment-graph-details-sentiment">positive <i>mentions</i></span>
                            </div>
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar positive-bar" style="width:28%"></div>
                            </div>
                        </li>
                        <li class="sentiment-graph-details-neutral" style="width:60%">
                            <div class="sentiment-graph-details-left">
                                <span class="sentiment-graph-details-percentage neutral-colored">60%</span>
                                <span class="sentiment-graph-details-sentiment">neutral <i>mentions</i></span>
                            </div>
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar neutral-bar" style="width:60%"></div>
                            </div>
                        </li>
                        <li class="sentiment-graph-details-negative" style="width:12%">
                            <div class="sentiment-graph-details-left">
                                <span class="sentiment-graph-details-percentage negative-colored">12%</span>
                                <span class="sentiment-graph-details-sentiment">negative <i>mentions</i></span>
                            </div>
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar negative-bar" style="width:12%"></div>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="metrics-block-graph sentiment-block-graph">
        <h5>SENTIMENT TREND
            <a class="popover-question-container" rel="tooltip" data-title="The Sentiment Trendline represents all mentions based on current filters. Data for the trendline is segmented on GMT timezone." data-original-title="">
                <i class="icon-question"></i>
            </a>
        </h5>
        <div id="hourly-sentoment-widget" class="mozaic-widget widget-hourly_filter" data-widget="hourly_filter" data-params="{&quot;channels&quot;:{&quot;/filters&quot;:&quot;/filters-4&quot;,&quot;/filters_hourly&quot;:&quot;/filters_hourly-1852&quot;}}" data-guid="widget-1866" data-initialized="true">
            <ul class="hourly-filter-wrapper">
                <li class="selected action-color-active" data-resolution="day">Daily</li>
                <li class="not_selected action-color-active hour-resolution-tab" data-resolution="hour">
                    Hourly
                    <div class="hourly-filter-tooltip permission-tooltip fade bottom in">
                        <div class="tooltip-arrow"></div>
                        <div class="tooltip-inner">Hourly Resolution is only available on the past 2 weeks of data.</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mozaic-widget metrics-state-manager widget-metrics_state_manager" data-widget="metrics_state_manager" data-params="{&quot;channels&quot;:{&quot;/data_series&quot;:&quot;/search_analytics_heavy-1853&quot;},&quot;data_path&quot;:[&quot;sentiment/charts/neutral&quot;,&quot;sentiment/charts/positive&quot;,&quot;sentiment/charts/negative&quot;],&quot;initial_state&quot;:&quot;init&quot;,&quot;template_name&quot;:&quot;templates/analytics/metrics_sentiment_state_manager.hjs&quot;,&quot;child_params&quot;:{&quot;channels&quot;:{&quot;/data_series&quot;:&quot;/search_analytics_heavy-1853&quot;},&quot;hide_y_axis&quot;:true,&quot;has_plotlines&quot;:true,&quot;stacking&quot;:true,&quot;series&quot;:[{&quot;data_path&quot;:&quot;sentiment/charts/negative&quot;,&quot;label&quot;:&quot;Negative mentions&quot;,&quot;color&quot;:&quot;#ea4237&quot;,&quot;lineColor&quot;:&quot;#ea4237&quot;},{&quot;data_path&quot;:&quot;sentiment/charts/neutral&quot;,&quot;label&quot;:&quot;Neutral mentions&quot;,&quot;color&quot;:&quot;#333333&quot;,&quot;lineColor&quot;:&quot;#333333&quot;},{&quot;data_path&quot;:&quot;sentiment/charts/positive&quot;,&quot;label&quot;:&quot;Positive mentions&quot;,&quot;color&quot;:&quot;#68c36b&quot;,&quot;lineColor&quot;:&quot;#68c36b&quot;}],&quot;render_to&quot;:&quot;sentiment-widget&quot;,&quot;initial_state&quot;:&quot;init&quot;}}" data-guid="widget-1867" data-initialized="true">
            <div id="sentiment-widget" class="mozaic-widget sentiment-graph widget-time_series" data-widget="time_series" data-params="{&quot;channels&quot;:{&quot;/data_series&quot;:&quot;/search_analytics_heavy-1853&quot;},&quot;hide_y_axis&quot;:true,&quot;has_plotlines&quot;:true,&quot;stacking&quot;:true,&quot;series&quot;:[{&quot;data_path&quot;:&quot;sentiment/charts/negative&quot;,&quot;label&quot;:&quot;Negative mentions&quot;,&quot;color&quot;:&quot;#ea4237&quot;,&quot;lineColor&quot;:&quot;#ea4237&quot;},{&quot;data_path&quot;:&quot;sentiment/charts/neutral&quot;,&quot;label&quot;:&quot;Neutral mentions&quot;,&quot;color&quot;:&quot;#333333&quot;,&quot;lineColor&quot;:&quot;#333333&quot;},{&quot;data_path&quot;:&quot;sentiment/charts/positive&quot;,&quot;label&quot;:&quot;Positive mentions&quot;,&quot;color&quot;:&quot;#68c36b&quot;,&quot;lineColor&quot;:&quot;#68c36b&quot;}],&quot;render_to&quot;:&quot;sentiment-widget&quot;,&quot;initial_state&quot;:&quot;init&quot;}" data-guid="widget-2194" data-initialized="true" data-highcharts-chart="33">
                <div class="highcharts-container" id="sentiment-trend" style="position: relative; overflow: hidden; width: 724px; height: 170px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
                    
                </div>
            </div>
        </div>
    </div>
</div>